<template>
  <div class="home-recommend-wrapper">
    <SwiperComponent :imgs="homeRecommendData.imgs" />
    <RecommendTabs :recommendTabsData="homeRecommendData.recommendTabsData" />
    <div class="home-recommend-padding-wrapper">
      <HotCar :hotCarList="homeRecommendData.hotCarList" />
      <RecommendList :recommendList="homeRecommendData.recommendList" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Mock from "mockjs";
import RecommendTabs from "@/pages/Home/Recommend/RecommendTabs/index.vue";
import SwiperComponent from "@/components/common/SwiperComponent/index.vue";
import HotCar from "@/pages/Home/Recommend/HotCar/index.vue";
import RecommendList from "@/pages/Home/Recommend/RecommendList/index.vue";
// mockjs 参考demo
const dataList = ref(
  Mock.mock({
    "rows|12": [
      {
        demoId: "@id",
        demoTitle: "@ctitle(3,10)",
        demoCnte:
          '<h2 style="text-align: center;">公告</h2><p>测试测试，内容内容。</p>',
        "demoMan|1": ["张三", "李四"],
        demoTime: "@datetime",
        "demoStatusText|1": ["生效", "未生效"],
        "demoStatus|1": ["1", "2"],

        "demoRole|1": ["1", "2"],
        "demoRoleText|1": ["专家", "社会监督员"],
        "demoMethod|1": ["1", "2"],
        "demoMethodText|1": ["PC", "微信"],
        demoFileList: [
          {
            archiveFor: "xls",
            archiveId: 107,
            archiveName: "任务管理病案审核专家意见模板.xls",
            bizId: "ZJYY0001",
            cldArchiveId: "557",
            crteTime: 1606443355672,
            crterId: "0",
            crterName: "超级管理员",
            fileBase64: null,
            matId: "1303",
            rid: "557",
            updtTime: 1606443355672,
            valiFlag: null,
          },
        ],
      },
    ],
  })
);
const homeRecommendData = ref(
  Mock.mock({
    // 轮播图
    "imgs|5": [
      {
        img: "@Image('100x100','@color','@cname')",
        "imgId|+1": 1,
      },
    ],
    // 推荐
    "recommendTabsData|5": [
      {
        img: "@Image('100x100','@color','@cname')",
        name: "@cname",
        "id|+1": 1,
      },
    ],
    // 热门车
    "hotCarList|4": [
      {
        "id|+1": 0,
        name: "@cname",
        "hotCarItemList|6": [
          {
            "itemId|+1": 0,
            img: "@Image('100x100','@color','@cname')",
            name: "@cname",
          },
        ],
      },
    ],
    // 推荐列表
    "recommendList|100": [
      {
        "id|+1": 0,
        title: "@ctitle(22,30)",
        "imgs|3": [
          {
            img: "@Image('100x100','@color','@cname')",
            "id|+1": 1,
          },
        ],
        radio: "@radio",
       
      },
    ],
  })
);
</script>

<style lang="scss" scope>
.home-recommend-wrapper {
  .home-recommend-padding-wrapper {
    padding: 0 16vw/375 * 100;
  }
}
</style>